<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<head>
  <title>易盾验证码-DEMO</title>
  <!-- 演示用js/css，非组件依赖 -->
  <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
  <!-- <link href='//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.css' rel='stylesheet'> -->
</head>

<body>
  <form style="max-width: 320px; margin: 120px auto;" action="/login" method="post">
    <div id="captcha_div"></div>
  </form>
  <!-- 验证码组件js -->
  <!-- <script src="//c.dun.163yun.com/js/c.js"></script> -->
  <script src="./demo.js"></script>
  <script>
    // 验证码组件初始化
    $(function () {
      //获取ID
      getCapthaId();

      function getCapthaId() {
        // initNECaptcha('f526410c09b44c81944e186721e4d091')
        //     return;
        $.ajax({
          url: 'GetCaptchaId.ac',
          type: 'POST',
          dataType: "text",
          success: function (res) {

            if (res != 'NO') {
              initNECaptcha(res)
            } else {
              setTimeout(function () {
                getCapthaId();
              }, 1500)

            }
          }
        })

      }
      //初始化
      function initNECaptcha(captchaId) {
        var opts = {
          "element": "captcha_div", // 可以是验证码容器id，也可以是HTMLElement
          //  "captchaId": "f526410c09b44c81944e186721e4d091", // 这里填入申请到的验证码id
          captchaId: captchaId,
          "width": 320, // 验证码组件显示宽度
          "initCallback": function (res) {
            console.log('初始化成功啊');
          },
          "verifyCallback": function (ret) { // 用户只要有拖动/点击，就会触发这个回调
            console.log(ret)
            // return;
            // drag_div.style.left = "0px";
            if (ret['value']) { // true:验证通过 false:验证失败
              $.ajax({
                url: 'SetCheckRes.ac',
                type: 'POST',
                data: {
                  capthaId: captchaId,
                  key: JSON.stringify(ret)
                },
                dataType: "text",
                success: function (res) {
                  if(res=='OK'){
                 location.reload()
                  }
                }
              })
            } else {
              setTimeout(function () {
                submitImgUrl();
              }, 500)

            }
          }
        }
        let d = new NECaptcha(opts);
        submitImgUrl();
        // initDrag(100)
      }

      // 提交图片地址
      function submitImgUrl() {
        setTimeout(function () {
          var doc = document.querySelectorAll('.ncpt_puzzle_bg')[1].firstChild;
          var imgUrl = $(doc).attr('src');
          $.ajax({
            url: 'SetUrl.ac ',
            type: 'POST',
            data: {
              picurl: imgUrl
            },
            dataType: "text",
            success: function (res) {
              if (res == 'OK') {
                getPostionLength();
              }
            }
          })

        }, 1000);
      }

      //获取长度
      function getPostionLength() {
        $.ajax({
          url: 'GetSlideLen.ac ',
          type: 'POST',
          dataType: "text",
          success: function (res) {
            if (res != 0) {
              initDrag(res)
            } else {
              setTimeout(function () {
                getPostionLength();
              }, 500)

            }
          }
        })
      }

      //  准备拉取
      function initDrag(len) {

        // setTimeout(function () {
        var smallImg = document.querySelector('.ncpt_puzzle_fg');
        var drag_div = document.querySelector(".ncpt_slide_fg");

        var drag = new Drag(drag_div, {
          handle: drag_div,
          moveLen: len,
          smallImg: smallImg
        });
        var event1 = document.createEvent('HTMLEvents');
        var event2 = document.createEvent('HTMLEvents');
        var event3 = document.createEvent('HTMLEvents');
        event1.initEvent("mousedown", true, true);
        event2.initEvent("mousemove", true, true);
        event3.initEvent("mouseup", true, true);

        //   var evDownObj = new Event('mousedown');
        drag_div.dispatchEvent(event1);

        //   var evMoveObj = new Event('mousemove');
        drag_div.dispatchEvent(event2);

        //  var evUpObj = new Event('mouseup');
        drag_div.dispatchEvent(event3);
        //  }, 1000)
      }

      function Drag() {
        this.initialize.apply(this, arguments);
      }
      Drag.prototype = {
        // 初始化  
        initialize: function (element, options) {
          this.element = this.$(element); // 被拖动的对象  
          this._x = this._y = 0; // 鼠标在元素中的位置  
          this._moveDrag = this.bind(this, this.moveDrag);
          this._stopDrag = this.bind(this, this.stopDrag);
          // 设置参数  
          this.setOptions(options);
          // 设置鼠标去“拖”的“柄”对象（注意与被拖动的对象区别）  
          this.handle = this.$(this.options.handle);
          // 设置回调函数  
          this.onStart = this.options.onStart;
          this.onMove = this.options.onMove;
          this.onStop = this.options.onStop;
          this.moveLen = this.options.moveLen;
          this.smallImg = this.options.smallImg;
          this.handle.style.cursor = "move";

          //  this.changeLayout();
          // 注册开始拖动事件  mousemove

          // this.addHandler(this.handle, "touchstart", this.bind(this, this.startDrag));
          this.addHandler(this.element, "mousedown", this.bind(this, this.startDrag));
          this.addHandler(this.element, "mousemove", this.bind(this, this.moveDrag));
          this.addHandler(this.element, "mouseup", this.bind(this, this.stopDrag));

        },

        // 改变被拖动对象的布局属性  
        changeLayout: function () {
          // this.element.style.top = this.element.offsetTop + "px";
          // this.element.style.left = this.moveLen + "px";
          // this.$(this.smallImg).style.left = this.moveLen + "px";
          //   this.element.style.left = this.element.offsetLeft + "px";
          this.element.style.position = "absolute";
          this.element.style.margin = "0";
        },

        startDrag: function (event) {
          var event = event || window.event;

          this.element.detachEvent
          console.log('开始')

          this._x = event.clientX - this.element.offsetLeft;
          this._y = event.clientY - this.element.offsetTop;
          // this.addHandler(this.element, "mousedown",  this._moveDrag);
          this.addHandler(this.element, "mousemove", this._moveDrag);

          // this.addHandler(this.element, "mouseup", this._stopDrag);
          this.preventDefault(event);
          this.handle.setCapture && this.handle.setCapture();
          this.onStart();
        },
        moveDrag: function (event) {
          var event = this.getEvent(event);
          var _this = this;
          //  console.log('移动中',_this.moveLen)
          //  console.log(_this.smallImg,'----')
          //var iTop = event.clientY - this._y;  
          // var iLeft = event.clientX - this._x;  
          //可在此处设定元素拖动之后的位置
          this.element.style.left = this.moveLen + "px";
           this.$(this.smallImg).style.left = this.moveLen + "px";
          _this.removeHandler(_this.element, "mousemove", _this._moveDrag);
          // _this.removeHandler(_this.element, "mouseup", _this._stopDrag);

          this.onMove();
        },
        stopDrag: function () {
          var _this = this;
          // $(_this.element).animate({
          //   left: _this.moveLen
          // }, 10, function () {
          //  _this.moveLen = 7;
          
          // })
          // $(_this.smallImg).animate({
          //   left: _this.moveLen
          // }, 10, function () {
          //  _this.moveLen = 7;
          // })
        console.log(_this.moveLen)
          // _this.removeHandler(_this.element, "mousemove", _this._moveDrag);
          _this.removeHandler(_this.element, "mouseup", _this._stopDrag);
         
          _this.handle.releaseCapture && _this.handle.releaseCapture();
          _this.onStop();
         
        },
        setOptions: function (options) {
          let _this = this;
          _this.options = {
            handle: _this.element, //事件对象  
            onStart: function () {}, // 开始时回调函数  
            onMove: function () {}, // 拖拽时回调函数  
            moveLen: 0,
            smallImg: '',
            onStop: function () {} // 停止时回调函数  
          };
          for (var p in options) {
            this.options[p] = options[p];
          }
        },
        $: function (id) {
          return typeof id === "string" ? document.getElementById(id) : id;
        },
        addHandler: function (element, eventType, handler) {
          if (element.addEventListener) {
            return element.addEventListener(eventType, handler, false);
          } else {
            return element.attachEvent("on" + eventType, handler);
          }
        },
        removeHandler: function (element, eventType, handler) {
          if (element.removeEventListener) {
            return element.removeEventListener(eventType, handler, false);
          } else {
            return element.detachEvent("on" + eventType, handler);
          }
        },
        getEvent: function (event) {
          return event || window.event;
        },
        preventDefault: function (event) {
          if (event.preventDefault) {
            event.preventDefault();
          } else {
            event.returnValue = false;
          }
        },
        bind: function (obj, handler) {
          return function () {
            return handler.apply(obj, arguments);
          }
        },
        touchstart: function (e) {

        },
      };


    })
  </script>
</body>

</html>